<template>
  <!-- 直播详情-关联直播 -->
  <div id="LiveDetail" class="live_detail">
    <div v-if="vipRootObj[5][123].owner">
      <div class="time_slot">
        <radio_group01 :radio_values="['近7天', '30天', '90天']" v-model="KindName" class="tab01" />
        <div class="optionsBox">
          <el-date-picker
            class="long_time"
            v-model="liveTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="onPick1"
          ></el-date-picker>
        </div>
      </div>
      <div class="detail_first-wrap">
        <div class="live_top">
          <div class="line"></div>
          <div class="text">直播预览</div>
        </div>
        <ul class="preview_list">
          <li class="preview_list-box box1">
            <div>{{ LiveOverview.liveCount }}</div>
            <div>直播场次</div>
          </li>
          <li class="preview_list-box box1">
            <div>{{ LiveOverview.shopLiveCount }}</div>
            <div>带货直播</div>
          </li>
          <li class="live_list-line"></li>
          <li class="preview_list-box">
            <div>{{ LiveOverview.livesales }}</div>
            <div>直播销售额</div>
          </li>
          <li class="preview_list-box">
            <div>{{ LiveOverview.livevolume }}</div>
            <div>直播销量</div>
          </li>
          <li class="live_list-line"></li>
          <li class="preview_list-box">
            <div>
              {{ LiveOverview.livePriceMIN == LiveOverview.livePriceMAX
              ?LiveOverview.livePriceMAX: LiveOverview.livePriceMIN +'-'+ LiveOverview.livePriceMAX}}
            </div>
            <div>商品价格区间(元)</div>
          </li>
          <li class="live_list-line"></li>
          <li class="preview_list-box">
            <div>{{ LiveOverview.avgOnlinePeople }}</div>
            <div>平均在线人数</div>
          </li>
          <li class="preview_list-box">
            <div>{{ LiveOverview.peoplePeak }}</div>
            <div>观看人数峰值</div>
          </li>
          <li class="live_list-line"></li>
          <li class="preview_list-box box-last">
            <div style="font-size: 22px" v-html="initTime(LiveOverview.timeDifferenceTotal)">
            </div>
            <div>总直播时长</div>
          </li>
          <li class="preview_list-box box-last">
            <div style="font-size: 22px" v-html="initTime(LiveOverview.timeDifferenceAverage)">
            
            </div>
            <div>场均直播时长</div>
          </li>
        </ul>
      </div>
      <div class="detail_second-wrap">
        <div class="second_left">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">直播时长分布</div>
          </div>
          <div class="second_left-echart">
            <BigPie
              v-if="liveTiemData.length != 0 && !ltLoading"
              :valueData="liveTiemData"
              Etitle="直播时长分布"
            />
            <div class="no_data" v-if="liveTiemData.length==0 && !ltLoading">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="ltLoading"
              v-if="ltLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
        <div class="second_right">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">开播时间统计</div>
          </div>
          <div class="switch">
            <div class="switch-btn" :class="{ native: changeBoard }" @click="changeList(true)">日</div>
            <div class="switch-btn" :class="{ native: !changeBoard }" @click="changeList(false)">周</div>
          </div>
          <div class="second_right-echart">
            <KChart
              v-if="startLiveData.x.length!=0 && !slLoading"
              :xData="startLiveData.x"
              :series1="startLiveData.y"
              name1="开播时间统计"
              title="场次"
            />
            <div class="no_data" v-if="startLiveData.x.length==0 && !slLoading">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="slLoading"
              v-if="slLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
      </div>
      <div class="detail_second-wrap">
        <div class="second_left">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">人均看播时长</div>
          </div>
          <div class="second_left-echart">
            <KChart
              v-if="peopLeLookData.x.length!=0 && !plLoading"
              :xData="peopLeLookData.x"
              :series1="peopLeLookData.y"
              name1="人均看播时长"
              title="单位:秒"
            />
            <div class="no_data" v-if="peopLeLookData.x.length==0 && !plLoading">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="plLoading"
              v-if="plLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
        <div class="second_right">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">UV价值分布</div>
          </div>
          <div class="second_right-echart">
            <BarChart02
              v-if="UvValueData.x.length!=0 && !UvLoading"
              :xData="UvValueData.x"
              :series1="UvValueData.y"
              name1="UV价值分布"
              name2="单位:元"
            />
            <div class="no_data" v-if="UvValueData.x.length==0 && !UvLoading">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="UvLoading"
              v-if="UvLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
      </div>
      <div class="detail_second-wrap" style="margin-top: 30px;">
        <div class="second_left">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">直播商品类目分布</div>
          </div>
          <div class="second_left-echart">
            <BigPie
              v-if="goodsClassData.length!=0 && !gcLoading"
              :valueData="goodsClassData"
              Etitle="直播商品类目分布"
            />
            <div class="no_data" v-if="goodsClassData.length==0 && !gcLoading">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="gcLoading"
              v-if="gcLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
        <div class="second_right">
          <div class="live_top">
            <div class="line"></div>
            <div class="text">直播商品价格分布</div>
          </div>
          <div class="second_right-echart">
            <BigPie
              v-if="goodsPriceData.length!=0 && !gpLoading"
              :valueData="goodsPriceData"
              Etitle="直播商品价格分布"
            />
            <div class="no_data" v-if="goodsPriceData.length==0 && !gpLoading">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="gpLoading"
              v-if="gpLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
      </div>
      <div class="detail_last-wrap">
        <div class="live_top">
          <div class="line"></div>
          <div class="text">直播列表</div>
        </div>
        <div class="last_column">
          <div class="last_box">
            <div class="last_box-item">
              <div class="text">总销量(件)</div>
              <div class="num">{{listBoxData.livevolume}}</div>
            </div>
            <div class="last_box-item">
              <div class="text">总销售额</div>
              <div class="num">{{listBoxData.livesales}}</div>
            </div>
          </div>
          <div class="checkbox-box">
            <el-checkbox v-model="checked">直播带货</el-checkbox>
          </div>
        </div>

        <div class="last_list">
          <section ref="capture">
            <table class="table" ref="tableEl">
              <thead>
                <!-- 排序 1 开始时间 2平均在线人数 3UV 4直播销量 5直播销售额 -->
                <tr ref="th_tr_El">
                  <th>直播间</th>
                  <th
                    @click="sort_fun(true, 1)"
                    v-if="orderType == 1 && sortValue == 1"
                    class="cursor"
                  >
                    开播时间
                    <img
                      src="@/assets/meng/down_up.png"
                      v-if="orderType == 1 && sortValue == 1"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 1)" class="cursor">
                    开播时间
                    <img
                      src="@/assets/meng/up_down.png"
                      v-if="orderType == 0 && sortValue == 1"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <!-- <th>观看人数峰值</th> -->
                  <th
                    @click="sort_fun(true, 3)"
                    v-if="orderType == 1 && sortValue == 3"
                    class="cursor"
                  >
                    UV价值
                    <img
                      src="@/assets/meng/down_up.png"
                      v-if="orderType == 1 && sortValue == 3"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 3)" class="cursor">
                    UV价值
                    <img
                      src="@/assets/meng/up_down.png"
                      v-if="orderType == 0 && sortValue == 3"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th
                    @click="sort_fun(true, 2)"
                    v-if="orderType == 1 && sortValue == 2"
                    class="cursor"
                  >
                    平均在线人数
                    <img
                      ml
                      src="@/assets/meng/down_up.png"
                      v-if="orderType == 1 && sortValue == 2"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 2)" class="cursor">
                    平均在线人数
                    <img
                      src="@/assets/meng/up_down.png"
                      v-if="orderType == 0 && sortValue == 2"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th
                    @click="sort_fun(true, 4)"
                    v-if="orderType == 1 && sortValue == 4"
                    class="cursor"
                  >
                    直播销量
                    <img
                      src="@/assets/meng/down_up.png"
                      v-if="orderType == 1 && sortValue == 4"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 4)" class="cursor">
                    直播销量
                    <img
                      src="@/assets/meng/up_down.png"
                      v-if="orderType == 0 && sortValue == 4"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th
                    @click="sort_fun(true, 5)"
                    v-if="orderType == 1 && sortValue == 5"
                    class="cursor"
                  >
                    直播销售额
                    <img
                      src="@/assets/meng/down_up.png"
                      v-if="orderType == 1 && sortValue == 5"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th v-else @click="sort_fun(false, 5)" class="cursor">
                    直播销售额
                    <img
                      src="@/assets/meng/up_down.png"
                      v-if="orderType == 0 && sortValue == 5"
                    />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in pageData" :key="index">
                  <td>
                    <div class="rightBox" @click="toLiveDetlis(item.status,item.roomId)">
                      <div class="picture">
                        <img :src="item.logo" alt v-errorImg:live />
                        <div class="playingIcon" v-if="item.status == 1">
                          <p class="livingGif">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                          </p>
                        </div>
                      </div>
                      <div class="info">
                        <div class="info_top">{{item.roomTitle}}</div>
                        <div class="info_btm">直播时长: {{item.duration}}</div>
                      </div>
                    </div>
                  </td>
                  <td>{{item.beginTime}}</td>
                  <!-- <td>202w</td> -->
                  <td>{{ item.isShop==1?item.uv: '--' }}</td>
                  <td>{{ item.avgOnlinePeople }}</td>
                  <td>{{ item.isShop==1?item.livevolume: '--' }}</td>
                  <td>{{ item.isShop==1?item.livesales: '--' }}</td>
                </tr>
              </tbody>
            </table>
            <div class="pageBox" v-if="pageData.length!=0">
              <el-pagination
                background
                layout="prev, pager, next, jumper"
                :total="pageTotal"
                :page-size="PageSize"
                :current-page="PageIndex"
                @current-change="get_data"
                :hide-on-single-page="true"
              ></el-pagination>
            </div>
            <div class="empty addTop" v-if="pageData.length==0 && !pageLoading">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
            <div
              v-loading="pageLoading"
              v-if="pageLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </section>
        </div>
      </div>
    </div>
    <div class="vip_pay_box" v-else>
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip routerName="FansPortrait" :lowestVipNum="vipRootObj[5][123].ownerMinLevel" />
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from './PieChart.vue';
import BarChart from './BarChart.vue';
import BarChart01 from './BarChart01.vue';
import BarChart02 from './BarChart02.vue';
import KChart from './KChart.vue';
import BigPie from '@/pages/wang/talent/tdetails/component/BigPie';
export default {
  props: {},
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 || time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        }
      },
      checked: false,
      KindName: '30天',
      liveTime: '',
      startDate: '',
      endDate: '',
      changeBoard: true, //日 / 周 切换
      sortValue: 1, //排序 1 开始时间 2平均在线人数 3UV 4直播销量 5直播销售额
      orderType: 1, // 0 降序 1 升序
      // data
      LiveOverview: {},
      liveTiemData: [],
      startLiveData: {
        x: [],
        y: []
      },
      peopLeLookData: {
        x: [],
        y: []
      },
      UvValueData: {
        x: [],
        y: []
      },
      goodsClassData: [],
      goodsPriceData: [],
      pageData: [],
      listBoxData: {},
      IsShop: 0, //是否直播带货
      PageIndex: 1, // 分页索引
      PageSize: 9, // 每页多少条数据
      pageTotal: 0, //列表总条数
      ltLoading: false,
      slLoading: false,
      plLoading: false,
      UvLoading: false,
      gcLoading: false,
      gpLoading: false,
      pageLoading: false,
      showPageVip: false,
      vipRootObj: this.$store.state.userRoot //会员权限对象
    };
  },
  components: { PieChart, BarChart, BarChart01, KChart, BarChart02, BigPie },
  computed: {},
  created() {},
  mounted() {
    if (this.vipRootObj[5][123].owner) {
      this.getListData();
    }
  },
  watch: {
    KindName: function (newVal, oldVal) {
      this.getListData();
    },
    changeData(e) {
      this.getListData();
    },
    toSearch() {
      this.getListData();
    },
    checked: function (newVal, oldVal) {
      console.log(newVal);
      newVal ? (this.IsShop = 1) : (this.IsShop = 0);
      this.getPage();
    }
  },
  methods: {
    toLiveDetlis(isToPage, id) {
      if (isToPage == 1) {
        let router = this.$router.resolve({
          path: `/live/${id}`
        });
        window.open(router.href, '_blank');
      } else {
        let router = this.$router.resolve({
          path: `/talent_main/liveDetailsRoot/${id}`
        });
        window.open(router.href, '_blank');
      }
    },
    // 排序
    sort_fun(parm01, parm02) {
      // console.log(parm02)
      if (parm01) {
        this.orderType = 0;
      } else {
        this.orderType = 1;
      }
      this.sortValue = parm02;
      this.PageIndex = 1;
      this.getPage();
    },
    // 分页
    get_data(e) {
      this.PageIndex = e;
      this.getPage();
    },
    changeList(e) {
      if (this.changeBoard == e) return; //防止重复点击同一个按钮
      this.changeBoard = e;
      this.GetStartLive();
    },
    onPick1() {
      this.KindName = '';
      this.getListData();
    },
    getListData() {
      switch (this.KindName) {
        case '近7天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D');
          break;
        case '30天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');

          break;
        case '90天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
      this.getLiveOverview();
      this.liveTimeLength();
      this.GetStartLive();
      this.getPeopLeLook();
      this.getUvValue();
      this.getGoodsClass();
      this.getGoodsPrice();
      this.getPage();
    },
    getLiveOverview() {
      this.LiveOverview = {};
      this.$axios
        .post('/api/Live/GetAuthorLiveOverView', {
          AuthorId: this.$route.params.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          if (res.data.code == 0) {
            this.LiveOverview = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    liveTimeLength() {
      this.liveTiemData = [];
      this.ltLoading = true;
      this.$axios
        .post('/api/Live/LiveDurationDistribution', {
          AuthorId: this.$route.params.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.ltLoading = false;
          if (res.data.code == 0) {
            this.liveTiemData = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    GetStartLive() {
      this.slLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsDurationStatistics', {
          AuthorId: this.$route.params.id,
          Times: this.startDate + '-' + this.endDate,
          DateType: this.changeBoard ? 'd' : 'w' //d天w周
        })
        .then(res => {
          this.slLoading = false;
          if (res.data.code == 0) {
            this.startLiveData.x = res.data.data.x;
            this.startLiveData.y = res.data.data.y;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    getPeopLeLook() {
      this.plLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsPerCapitaWatchDuration', {
          AuthorId: this.$route.params.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.plLoading = false;
          if (res.data.code == 0) {
            this.peopLeLookData.x = res.data.data.x;
            this.peopLeLookData.y = res.data.data.y;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    getUvValue() {
      this.UvLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsUVValueDistribution', {
          AuthorId: this.$route.params.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.UvLoading = false;
          if (res.data.code == 0) {
            this.UvValueData.x = res.data.data.x;
            this.UvValueData.y = res.data.data.y;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    getGoodsClass() {
      this.gcLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsProCategoryDistribution', {
          AuthorId: this.$route.params.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.gcLoading = false;
          if (res.data.code == 0) {
            this.goodsClassData = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    getGoodsPrice() {
      this.gpLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsProLivePriceDistribution', {
          AuthorId: this.$route.params.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.gpLoading = false;
          if (res.data.code == 0) {
            this.goodsPriceData = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    getPage() {
      this.pageLoading = true;
      this.pageData = [];
      this.$axios
        .post('/api/Live/LiveDetailsGetPageList', {
          AuthorId: this.$route.params.id,
          Times: this.startDate + '-' + this.endDate,
          IsShop: this.IsShop, //是否直播带货 1 是  其他值 否
          PageIndex: this.PageIndex, //分页索引
          PageSize: this.PageSize, //分页大小
          SortOrder: this.orderType, //排序 1 开始时间 2平均在线人数 3UV 4直播销量 5直播销售额
          SortValue: this.sortValue //排序 0降序 1升序
        })
        .then(res => {
          this.pageLoading = false;
          if (res.data.code == 0) {
            this.pageData = res.data.data.list;
            this.listBoxData = res.data.data.total;
            this.pageTotal = res.data.data.pageInfo.totalCount;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    }
  }
};
</script>

<style scoped lang="less">
.live_detail {
  .vip_pay_box .vip_bg_box {
    background: url('~@/assets/shi/vipLeveBgc2.png') no-repeat;
  }
  .time_slot {
    // height: 62px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    .tab01 {
      margin-right: 20px;
    }
  }
  .live_top {
    display: flex;
    align-items: center;
    color: #222;
    font-weight: 600;
    .line {
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
    }
  }
  .detail_first-wrap {
    margin-top: 20px;

    .preview_list {
      display: flex;
      padding: 40px 0 42px;
      flex-wrap: wrap;
      .preview_list-box {
        width: 11%;
        text-align: center;
        // padding-left: 30px;
        box-sizing: border-box;
        div:nth-child(1) {
          font-size: 24px;
          // font-weight: 600;
          font-family: DINAlternate-Bold;
          color: #222;
        }
        div:nth-child(2) {
          font-size: 12px;
          color: #888;
        }
        .time {
          font-size: 16px;
          font-weight: 500;
        }
      }
      .box1 {
        width: 8%;
      }
      .box-last {
        width: 14%;
      }
      .live_list-line {
        width: 1px;
        height: 48px;
        background-color: #e5e5e5;
      }
    }
  }
  .detail_second-wrap {
    display: flex;
    justify-content: space-between;
    .second_left {
      width: 50%;
      .second_left-echart {
        margin-top: 30px;
        height: 300px;
      }
    }
    .second_right {
      position: relative;
      width: 50%;
      .second_right-echart {
        margin-top: 30px;
        height: 300px;
      }
      .switch {
        position: absolute;
        top: 0;
        right: 10px;
        display: flex;
        .switch-btn {
          width: 40px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 13px;
          color: #555555;
          background-color: #fff;
          border: 1px solid #efefef;
          box-sizing: border-box;
          cursor: pointer;
        }
        .switch-btn:first-child {
          border-radius: 4px 0px 0px 4px;
          border-right: none;
        }
        .switch-btn:last-child {
          border-radius: 0px 4px 4px 0px;
        }
        .native {
          background-color: #fd7f2c;
          color: #fff;
        }
      }
    }
  }

  .detail_third-wrap {
    height: 300px;
  }
  .detail_fourth-wrap {
    height: 300px;
  }
  .detail_last-wrap {
    height: 300px;
    .last_column {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .last_box {
      width: 100%;
      display: flex;
      .last_box-item {
        width: 25%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 4px;
        margin-top: 16px;
        background-color: #f5f5f5;
        .text {
          font-size: 14px;
          color: #888888;
        }
        .num {
          font-size: 18px;
          color: #222;
          font-family: DINAlternate-Bold;
        }
      }
      .last_box-item:last-child {
        margin-left: 20px;
      }
    }
  }
  table {
    text-align: center;
    margin-top: 14px;
    thead {
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
        margin-right: 2px;
        cursor: pointer;
      }
      tr {
        th {
          padding: 0 2px;
          width: 10%;
        }
        th:first-child {
          width: 20%;
          text-align: left;
          padding-left: 24px;
        }
        th:nth-child(2) th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(6),
        th:nth-child(7) {
          width: 11%;
        }
        th:nth-child(8) {
          width: 14%;
        }
      }
    }
    tbody {
      tr {
        height: 78px;
        td {
          padding: 0 2px;
        }
        // td:nth-child(1),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
          color: #222222;
        }
      }
      .rankNum {
        font-size: 15px;
      }
    }
    // 数量
    .numBox {
      span:nth-of-type(1) {
        font-size: 16px !important;
      }
    }
    // 商品

    .rightBox {
      display: flex;
      align-items: center;
      padding-left: 24px;
      cursor: pointer;
      .picture {
        width: 50px;
        height: 50px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
          object-fit: cover;
        }
        .playingIcon {
          width: 18px;
          height: 18px;
          background: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border-radius: 4px;
          position: absolute;
          top: 32px;
          left: 32px;
          z-index: 2;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .info {
        margin-left: 10px;
        text-align: left;
        .info_top {
          width: 300px;
          font-size: 14px;
          color: #222222;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .info_top:hover {
          color: #ff924b;
        }
        .info_btm {
          font-size: 13px;
          color: #888888;
          margin-top: 4px;
        }
      }
    }
    // 操作
    .optionBox {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 32px;
        height: 32px;
        margin-right: 16px;
        cursor: pointer;
      }
      img:last-child {
        margin-right: 0;
      }
      .optionBox-details {
        width: 88px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 14px;
        color: #fff;
        margin: 0 auto;
        cursor: pointer;
      }
      .optionBox-details:hover {
        background-color: #ff924b;
      }
      // img:nth-child(4) {
      //   margin-right: 0;
      // }
    }
  }
  .no_data {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #b5b5b5;
  }
}
@media screen and (max-width: 1400px) {
  #LiveDetail .preview_list {
    padding-top: 20px;
  }
  #LiveDetail .preview_list .preview_list-box {
    width: 19%;
    margin-top: 20px;
  }
  #LiveDetail .preview_list .preview_list-box div:first-child {
    font-size: 20px;
  }
  #LiveDetail .preview_list .live_list-line {
    margin-top: 20px;
  }
}
[ml] {
  margin-left: 4px;
}
.cursor {
  cursor: pointer;
}
</style>
